<template>
    <view class="container">
        <!-- 内容流 -->
        <scroll-view scroll-y class="content-stream">
            <view class="post-grid">
                <view v-for="(post, index) in postList" :key="index" class="post" @tap="navigateToDetail(post)">
                    <view class="author-info">
                        <!-- 修改为使用 authorimg 作为头像链接 -->
                        <image :src="post.authorimg" class="avatar"></image> 
                        <text class="author">{{ post.author }}</text>
                        <text class="time">{{ post.time }}</text>
                    </view>
                    <text class="topic">{{ post.topic }}</text>
                    <image :src="postImage" class="post-image" mode="widthFix"></image>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { UniAdapter } from 'uniapp-axios-adapter';
import { onLoad } from '@dcloudio/uni-app';
// 后端数据没有写帖子image接口，先把图写死
const postImage='https://q1.itc.cn/q_70/images03/20240923/faeb862d73ac4b96af0f46361b4f8fe9.jpeg';

// 创建 Axios 实例并配置适配器
const instance = axios.create({
    adapter: UniAdapter,
    timeout: 10000,
    baseURL: 'http://127.0.0.1:8081'
});

// 存储后端返回的数据
const postList = ref([]);

onMounted(() => {
    console.log('获取后端数据');
    // 发送 GET 请求到后端接口
    instance.get('/topic') 
        .then(response => {
            const data = response.data;
            const newPostList = [];
            // 假设后端返回的数据中各个数组长度一致
            for (let i = 0; i < data.id.length; i++) { 
                newPostList.push({
                    id: data.id[i],
                    topic: data.topic[i],
                    content: data.content[i],
                    author: data.author[i],
                    up: data.up[i],
                    down: data.down[i],
                    time: data.time[i],
                    show: data.show[i],
                    authorimg: data.authorimg[i]
					//差一个帖子的image数据 contentimg
                });
            }
            // 将处理后的数据赋值给 postList
            postList.value = newPostList;
            console.log('数据获取成功:', postList.value);
        })
        .catch(error => {
            console.error('数据获取失败:', error);
        });
});

// 跳转至帖子详情页
const navigateToDetail = (post) => {
	console.log('头像：',post.authorimg);
    uni.navigateTo({
        url: `/pages/strategy/contentDetail?id=${encodeURIComponent(post.id)}&author=${encodeURIComponent(post.author)}&time=${encodeURIComponent(post.time)}&topic=${encodeURIComponent(post.topic)}&content=${encodeURIComponent(post.content)}&down=${encodeURIComponent(post.down)}&up=${encodeURIComponent(post.up)}&authorimg=${encodeURIComponent(post.authorimg)}}`//contentimg=${encodeURIComponent(post.contentimg)} 后续down将改为number
    });
    console.log('页面跳转成功！',post.id,post.author,post.time,post.topic,post.content,post.down,post.up,post.authorimg);
}
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content-stream {
    flex: 1;
}

.post-grid {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    grid-auto-rows: auto;
}

.post {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin: 8px;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    display: inline-block;
    /* 添加鼠标指针样式 */
}

.post:hover {
    transform: translateY(-5px);
}

.author-info {
    display: flex;
    align-items: center;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.author {
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
}

.time {
    color: #999;
    font-size: 12px;
}

.topic {
    margin-top: 10px;
    font-size: 14px;

    /* 限制文本 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.post-image {
    margin-top: 10px;
    width: 100%;
    border-radius: 10px;
}
</style>